<template>
  <div class="table-box card">
    <el-form :model="integralForm" ref="ruleFormRef">
      <div class="cim">
        <div class="title">积分规则</div>
        <div class="vipSystemInfo">
          <el-form-item label="销售方式" prop="pointType">
            <el-select v-model="integralForm.pointType" class="width180">
              <el-option label="按金额积分" :value="1" />
              <el-option label="按商品积分" :value="2" />
            </el-select>
            <div class="ml6 flx-default" v-if="integralForm.pointType === 1">
              <text class="mr6 text-invalid-color">每消费</text>
              <el-input-number v-model="integralForm.spendPerPoint" :controls="false" />
              <text class="ml6 text-invalid-color">元获得1积分</text>
            </div>
          </el-form-item>
          <el-form-item label="积分支付" prop="spendPerPoint">
            <text class="mr6">每</text>
            <el-input-number v-model="integralForm.spendPerPoint" :controls="false" />
            <text class="ml6">积分可抵用1元现金</text>
          </el-form-item>
          <el-form-item label="清空积分" prop="resetPoints">
            <el-switch v-model="integralForm.resetPoints" active-text="清空" inactive-text="不清空" inline-prompt />
            <text class="ml6 text-invalid-color">是否在每年1月1日凌晨,将会员积分重置为0</text>
          </el-form-item>
        </div>
      </div>
      <div class="cim">
        <div class="title">新会员注册活动</div>
        <div class="vipSystemInfo">
          <el-form-item label="赠送积分" prop="sendPoints">
            <el-input-number v-model="integralForm.sendPoints" :controls="false" />
            <text class="ml6">分</text>
          </el-form-item>
          <el-form-item label="赠送优惠券">
            <div class="gift">
              <div class="flx-default mb10" v-for="(coupons, cus) in integralForm.sendCounpon" :key="cus">
                <el-select v-model="coupons.cType" @change="(e:any) => changeCoupons(e, cus)" class="width140 mr10">
                  <el-option v-for="(im, ix) in couponType" :key="ix" :label="im.label" :value="im.value" />
                </el-select>
                <el-select v-model="coupons.cId" class="width140 mr10">
                  <el-option v-for="(jm, jx) in cps[coupons.cType]" :key="jx" :label="jm.name" :value="jm.id" />
                </el-select>
                <div class="flx-default">
                  <el-input-number class="width80" v-model="coupons.quantity" :controls="false" />
                  <text class="ml6">张</text>
                  <el-icon class="ml10 pointer" color="red" size="20"><Delete /></el-icon>
                </div>
              </div>
              <el-icon class="pointer" color="var(--el-color-primary)" size="36"><CirclePlusFilled /></el-icon>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="cim">
        <div class="title">会员生日活动</div>
        <div class="vipSystemInfo">
          <el-form-item label="赠送积分" prop="borthSendPoints">
            <el-input-number v-model="integralForm.borthSendPoints" :controls="false" />
            <text class="ml6">分</text>
          </el-form-item>
          <el-form-item label="赠送优惠券">
            <div class="gift">
              <div class="flx-default mb10">
                <el-select v-model="integralForm.saleType" class="width140 mr10">
                  <el-option label="按金额积分" :value="1" />
                  <el-option label="按商品积分" :value="2" />
                </el-select>
                <el-select v-model="integralForm.saleType" class="width140 mr10">
                  <el-option label="按金额积分" :value="1" />
                  <el-option label="按商品积分" :value="2" />
                </el-select>
                <div class="flx-default">
                  <el-input-number class="width80" v-model="integralForm.saleType" :controls="false" />
                  <text class="ml6">张</text>
                  <el-icon class="ml10 pointer" color="red" size="20"><Delete /></el-icon>
                </div>
              </div>
              <el-icon class="pointer" color="var(--el-color-primary)" size="36"><CirclePlusFilled /></el-icon>
            </div>
          </el-form-item>
          <el-form-item label="当日双倍积分" prop="borthDoublePoint">
            <el-switch v-model="integralForm.borthDoublePoint" active-text="是" inactive-text="否" inline-prompt />
          </el-form-item>
        </div>
      </div>
      <div class="cim">
        <div class="title">会员日活动</div>
        <div class="vipSystemInfo">
          <el-form-item label="会员日方式" prop="memberDayType">
            <el-select v-model="integralForm.memberDayType" class="width180">
              <el-option label="按周" :value="1" />
              <el-option label="按日期" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label-width="82">
            <div v-if="integralForm.memberDayType === 1">
              <el-checkbox-group v-model="integralForm.memberDayWeek">
                <el-checkbox-button v-for="(im, ix) in weeks" :key="ix" :label="im.label" :value="im.value" />
              </el-checkbox-group>
            </div>
            <div class="width580" v-if="integralForm.memberDayType === 2">
              <el-checkbox-group v-model="integralForm.memberDayMonth">
                <el-checkbox
                  class="mb10"
                  v-for="date in 31"
                  :key="date"
                  :label="date < 10 ? '0' + date : date"
                  :value="date"
                  border
                />
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="积分活动" prop="memberDayPoint">
            <text class="mr6">当日消费</text>
            <el-input-number v-model="integralForm.memberDayPoint" :controls="false" />
            <text class="ml6">倍积分</text>
          </el-form-item>
          <el-form-item label="活动状态" prop="empty">
            <el-switch v-model="integralForm.empty" active-text="是" inactive-text="否" inline-prompt />
            <text class="ml6 text-invalid-color">开启当前活动</text>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="integralRules">
import { ref, onMounted, nextTick } from "vue";
import { getUserPointrule } from "@/api/modules/member";
import { weeks } from "@/utils/serviceDict";
import { useSelectStore } from "@/stores/modules/dict";
import { getFoodCouponList } from "@/api/modules/coupon";

const couponType = ref<any>([]);

const cps = ref<any[]>([]);
interface IntegralForm {
  borthDoublePoint: Boolean;
  borthSendCounpon: any[];
  borthSendPoints: number;
  corpId: number;
  memberDayMonth: any[];
  memberDayPoint: number;
  memberDayType: number;
  memberDayWeek: any[];
  pointType: number;
  resetPoints: boolean;
  sendCounpon: any[];
  sendPoints: number;
  spendPerPoint: number;
  empty?: boolean;
  saleType?: any;
}
const integralForm = ref<IntegralForm>({
  borthDoublePoint: false,
  borthSendCounpon: [],
  borthSendPoints: 0,
  corpId: 1001,
  memberDayMonth: [],
  memberDayPoint: 2,
  memberDayType: 1,
  memberDayWeek: [],
  pointType: 2,
  resetPoints: false,
  sendCounpon: [{}],
  sendPoints: 0,
  spendPerPoint: 1
});

const getPageData = () => {
  getUserPointrule({ pageNum: 1, pageSize: 1 }).then((res: any) => {
    integralForm.value = res.data;
  });
};

const onSubmit = () => {
  console.log("submit", integralForm.value);
};

const changeCoupons = (val: any, ix: number) => {
  console.log("change", val, ix);
};

onMounted(() => {
  // 页面不使用使用时解开全部
  // nextTick(() => {
  //   useSelectStore()
  //     .getDic("CouponType")
  //     .then(data => {
  //       couponType.value = data;
  //       for (let i = 0; i < data.length; i++) {
  //         getFoodCouponList({ typeId: data[i].value, pageNum: 1, pageSize: 9999 }).then(val => {
  //           cps.value[data[i].value] = val.data.list;
  //         });
  //       }
  //     });
  // });
  // getPageData();
});
</script>

<style lang="scss" scoped>
.cim {
  .title {
    height: 42px;
    font-size: 14px;
    line-height: 42px;
    border-bottom: 1px solid #e7ecf1;
  }
  .vipSystemInfo {
    padding: 20px 20px 0 10px;
    border-bottom: 1px solid #e7ecf1;
  }
}
.gift {
  padding: 10px;
  background-color: #eeeeee;
  border-radius: 8px;
}
</style>
